<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展卡</title>
    <style>
        .container{
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .panel{
            /* width: 200px; */
            height: 80vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            margin: 20px;
            border-radius: 50px;
            flex: 0.4 ;
            transition:all 0.4s ease-in;
        }
        .panel h2{     
            color: #FFF;
            font-size: 18px;
            margin-top: 967px;
            margin-left: 20px;
            /* transition: all 0.4s ease-in; */
        }
        .panel.active{
            flex: 5;
            transition: 0.4s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h2>Explore The World</h2>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
            <h2>Wild Forest</h2>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');">
            <h2>Sunny Beach</h2>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80');">
            <h2>City on Winter</h2>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
            <h2>Mountains - Clouds</h2>
        </div>
    </div>
    <script>
        // 选择所有样式为panel
        const panels = document.querySelectorAll('.panel');
        // 遍历所有的panel，被他们都添加上点击事件click
       panels.forEach(panel=>{
            panel.addEventListener('click',()=>{
                // 移除名为active的样式
                removeActiveClass('active');
                //给当前的panel添加active样式
                panel.classList.add('active');
            })
       })
    //   移出样式函数
    function removeActiveClass(){
        panels.forEach(panel=>{
            panel.classList.remove('active')
        })
    }
    </script>
</body>
</html>